<!--
 * @Descripttion: 角色添加用户
 * @version:
 * @Author: 穆宏宇
 * @Date: 2020-09-27 18:37
 * @LastEditors: a12
 * @LastEditTime: 2020-09-27 18:37
-->
<template>
  <div>
    <el-dialog
        title="添加用户"
        :visible.sync="dialogRoleVisible"
        width="80%"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :before-close="handleRoleClose"
        @open="getUserListEvent">
      <el-row :gutter="10">
        <el-col :span="4">
          <el-card class="box-card">
            <div slot="header" class="clearfix">
              <i class="el-icon-menu orgIcon"></i>
              <span>组织机构</span>
              <!--            <el-button style="float: right; padding: 3px 0" type="text">操作</el-button>-->
            </div>
            <el-tree
                :data="treeData"
                node-key="id"
                :check-on-click-node="true"
                :expand-on-click-node="false"
                default-expand-all
                :default-checked-keys="[5]"
                :props="defaultProps"
                @node-click="changeTree">
            </el-tree>
          </el-card>
        </el-col>
        <el-col :span="20">
          <el-card class="box-card">
            <!-- 搜索 -->
            <e-control :searchFormOptions="formOptions"
                       :btns="btns"
                       @on-search="onSearch"
                       @on-refresh="onRefresh">
            </e-control>
      
            <!-- 表格 -->
            <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="55"></el-table-column>
              <el-table-column prop="account" label="登录名"></el-table-column>
              <el-table-column prop="name" label="真实户名"></el-table-column>
              <el-table-column prop="mobile" label="电话"></el-table-column>
              <el-table-column prop="email" label="邮箱"></el-table-column>
              <el-table-column prop="roles" label="角色"></el-table-column>
              <!--            <el-table-column prop="date" label="是否有效" width="180"></el-table-column>-->
              <el-table-column prop="orgName" label="组织" width="180"></el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-pagination
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :current-page="currentPage"
                :page-size="pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="totalPage">
            </el-pagination>
          </el-card>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogRoleVisible = false">取 消</el-button>
        <el-button type="primary" @click="confirmRole">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  import eControl from '@/components/e-control'
  import { formOptions, btns } from './control'
  import interFaces from './interFaces'
  import { getUserList, getOrgTree,roleAdduser} from '@/api/admin.api'
  export default {
    name: 'role-add-users',
    props:{
      roleId:{
        type: String,
        default: ''
      }
    },
    components: {
      eControl
    },
    data() {
      return {
        formOptions,
        btns,
        interFaces,
        dialogRoleVisible:false,
        searchData:{},
        orgId: '', // 树型ID
        // 左侧树
        treeData: [],
        defaultProps: {
          children: 'children',
          label: 'name'
        },
        // 表格数据
        tableData: [],
        currentPage:1,
        pageSize:10,
        totalPage:0,
        multipleSelection:[]
      }
    },
    watch: {},
    computed: {},
    created() {
      // 获取组织树
      this.getOrgTreeEvent()
      this.getUserListEvent()
    },
    mounted() {
    },
    methods: {
      /**
       * @description 复合条件查询列表用户列表
       * @author 穆宏宇
       * @date 2020-09-24 13:34:09
       * @param
       * @return
       * */
      getUserListEvent () {
        const params = {
          noneRole: this.roleId,
          orgId: this.orgId,
          size: this.pageSize,
          current: this.currentPage,
          account: this.searchData.account,
          name: this.searchData.name
        }
        getUserList(params).then(res=>{
          this.tableData = res.records
          this.totalPage = res.total
        })
      },
      // 获取组织树
      getOrgTreeEvent(){
        getOrgTree('0').then(res=>{
          this.treeData = res;
        }).catch(err =>{
          this.$message({
            message: err.msg,
            type: 'error'
          })
        })
      },
      // 搜索
      onSearch(data) {
        this.currentPage = 1
        this.pageSize = 10
        this.searchData = {...data}
        this.getUserListEvent()
      },
      // 刷新
      onRefresh(data) {
        this.currentPage = 1
        this.pageSize = 10
        this.orgId=''
        this.searchData = {...data}
        this.getUserListEvent()
      },
      // 关闭弹窗
      handleRoleClose(done){
        // 清空数据
        this.tableData = []
        done();
      },
      // 添加用户
      confirmRole() {
        let self = this
        let userIds = []
          self.multipleSelection.forEach(item => {
          userIds.push(item.id)
        })
        roleAdduser({roleIds:[self.roleId] , userIds:userIds}).then( ()=>{
          self.$parent.$parent.refreshTable()
          self.dialogRoleVisible = false
        })
      },
      // 每页显示条数
      handleSizeChange(val) {
        this.pageSize = val
        this.getUserListEvent()
      },
      // 当前页数
      handleCurrentChange(val) {
        this.currentPage = val
        this.getUserListEvent()
      },
      changeTree(item) {
        this.orgId = item.id
        // 查询已注册用户
        this.getUserListEvent()
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
        console.log(val)
      }
    }
  }
</script>

<style scoped lang="scss">

</style>
